<template>
	<view>
		<u-sticky h5-nav-height="0">
			<!-- <navBar title="搜索" /> -->
			<view class="search u-p-t-20 u-p-l-30 u-p-r-30 u-p-b-20 u-flex">
				<view class="u-p-r-30" @click="back">
					<view class="u-flex u-row-center" style="background: #ff9832;;width: 56rpx;height: 56rpx;border-radius: 50%;">
						<u-icon name="arrow-left" color="white" size="32"></u-icon>
					</view>
				</view>
				<u-search v-model="keyWord" placeholder="搜索影片、影院" :show-action="false" @change="onSearch" />
				<view class="u-p-l-20 u-type-primary-light" @click="show=true">
					<text class="u-p-r-10">{{typeName}}</text>
					<u-icon name="arrow-down"></u-icon>
					<u-select confirm-color="#f29100" v-model="show" :list="list" @confirm="confirm"></u-select>
				</view>
			</view>
		</u-sticky>
		<!--影片列表-->
		<view v-show="typeName=='影片'">
			<view style="border-bottom: 1px solid #f2f2f2;" class="u-p-t-20 u-p-b-20 u-p-l-30 u-p-r-30 u-font-32">
				影片
			</view>
			<view class="u-p-l-30 u-p-r-30">
				<moiveList ref="film" />
			</view>
		</view>

		<!-- 影院列表 -->
		<view v-show="typeName=='影院'">
			<view style="border-bottom: 1px solid #f2f2f2;" class="u-p-t-20 u-p-b-20 u-p-l-30 u-p-r-30 u-font-32">
				影院
			</view>
			<view class="u-p-b-15">
				<cinemaList ref="cinemaList" />
			</view>
		</view>
	</view>
</template>
<script>
	import navBar from '@/components/navbar/index'
	import moiveList from './components/moiveList.vue'
	import cinemaList from './components/cinemaList.vue'
	export default {
		data() {
			return {
				show: false,
				type: '',
				current: 0,
				keyWord: '',
				list: [{
					label: '影片'
				}, {
					label: '影院'
				}],
				typeName: '影片'
			}
		},
		components: {
			navBar,
			moiveList,
			cinemaList
		},
		mounted() {
			this.$refs.film.getFilmList();
		},
		onReachBottom() {
			if (this.typeName  == '影院') {
				this.$refs.cinemaList.page = ++this.$refs.cinemaList.page;
				this.$refs.cinemaList.getCinemaList();
			} else {
				this.$refs.film.page = ++this.$refs.film.page
				this.$refs.film.getFilmList();
			}
		},
		onPullDownRefresh() {
			if (this.typeName  == '影院') {
				this.$refs.cinemaList.page = 1;
				this.$refs.cinemaList.cinemaList = [];
				this.$refs.cinemaList.getCinemaList();
			} else {
				this.$refs.film.page = 1;
				this.$refs.film.moiveList = [];
				this.$refs.film.getFilmList();
			}
			uni.stopPullDownRefresh();
		},
		methods: {
			onSearch(val) {
				if (this.typeName  == '影院') {
					this.$refs.cinemaList.cinemaList = [];
					this.$refs.cinemaList.name = val;
					this.$refs.cinemaList.getCinemaList();
				} else {
					this.$refs.film.moiveList = [];
					this.$refs.film.name = val;
					this.$refs.film.getFilmList();
				}	
			},
			confirm(e) {
				this.typeName = e[0].label;
				this.keyWord = '';
				if (e[0].label == '影片') {
					this.$refs.film.moiveList = [];
					this.$refs.film.name = '';
					this.$refs.film.getFilmList();
				} else {
					this.$refs.cinemaList.cinemaList = [];
					this.$refs.cinemaList.name = '';
					this.$refs.cinemaList.getCinemaList();
				}
			},
			back() {
				// #ifdef H5
				window.history.back()
				// #endif
				// #ifdef APP-PLUS
				uni.navigateBack()
				// #endif
			}
		}
	}
</script>
<style scoped lang="scss">
	.search {
		background: $u-custom-color;
	}

	.search-line {
		font-size: 14px;
		padding: 10px 15px;
		border-bottom: 1px solid #ECEAEA;
		background-color: #fff;
	}

	.search-more {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		color: #FF6600;
		padding: 10px 15px;
		border-top: 1px solid #ECEAEA;
		border-bottom: 1px solid #ECEAEA;
		background-color: #fff;
	}

	.search-box {
		background-color: #fff;
		margin-bottom: 10px;
	}
</style>
<style scoped>
	>>>.u-mode-light-primary {
		background: linear-gradient(to right, #FF6801, #FF9832);
		border-color: #ffffff !important;
		color: #ffffff;
	}
</style>
